<!-- 信息详细页面 -->
<template>
     <MyHome></MyHome>
     <!-- 登录成功后的展示 -->
    <div class="bigbox" v-if="channel.isLogin">
       <div>
        <div style="color:brown; font-weight: 800;">用户权限:{{ channel.loginList[channel.logininfoid-1].userRole }}</div>
        <div>姓名:{{ channel.loginList[channel.logininfoid-1].name }}</div>
        <div>性别:{{ channel.loginList[channel.logininfoid-1].gender }}</div>
        <div>年龄:{{ channel.loginList[channel.logininfoid-1].age }}岁</div>
        <div>用户名:{{ channel.loginList[channel.logininfoid-1].username }}</div>
        <div>e卡余额:{{ channel.loginList[channel.logininfoid-1].ecardBalance}}元</div>
       </div>
        <div>
            <img :src="channel.loginList[channel.logininfoid-1].avatar" alt="cw" style="width: 300px; height: 300px; border-radius: 50%;">
        </div>
    </div>
    <!-- 未登录的状态 -->
     <!-- 未登录状态 -->
     <div v-if="channel.isLogin === false" class="nologin">
     <img src="../assets/用户.png" alt="cw"> 
      <span class="wz1">您好,请先登录!再选择查询您的登录信息。</span>
    </div>

        
</template>

<script setup>
import MyHome from '../components/top/MyHome.vue';
import { useCounterStore } from '../stores/counter'
const channel = useCounterStore()




</script>


<style lang="css" scoped>
    .bigbox{
        width: 700px;
        height: 400px;
        margin: 30px auto;
        background-color:azure;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .bigbox div{
        margin: 20px 0;
    }
    .nologin{
    width: 100%;
    height: 300px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.wz1{
    font-size: 20px;
    font-weight: 800;
    margin-left: 20px;
}
img{
    width: 100px;
    height: 100px;
    margin-left: 20px;
}
</style>
